<template>
  <el-amap 
    class="amap-box" 
    :vid="'amap-vue'" 
    :mapStyle="mapStyle"
    :center="center"
    :zoom="zoom"
    :events="events"
  >
    <el-amap-circle-marker 
      v-for="(circle, index) in circles" 
      :center="circle.center" 
      :radius="circle.radius" 
      :stroke-weight="circle.strokeWeight"
      :stroke-color="circle.strokeColor" 
      :fill-color="circle.fillColor" 
      :fill-opacity="circle.fillOpacity" 
      :events="circle.events"
      :key="index"
    />
  </el-amap>
</template>

<script>
import axios from 'axios'
export default {
  name: 'AmapPoint',
  data(){
    return {
      mapStyle: '',
      center: [121.67, 29.88],
      // center: [121.56, 29.86],
      zoom: 11,
      events: {
        click: () => {
          this.$emit('hidePoint')
        }
      },
      circles: []
    }
  },
  methods: {
    getAllLocations(){
      axios({
        method: 'post',
        url: '/api/dataWall/findAllLocation'
      }).then((res)=>{
        let result = res.data
        let circles = []
        let fillColor = '#FFFFFF'
        let pointNum0 = 0,
            pointNum1 = 0,
            pointNum2 = 0
        result.forEach((item)=>{
          if(item.bus_type === 1){ // 自助机
            fillColor = '#CCC842'
            pointNum1++
          } else 
          if(item.bus_type === 2){ // 流动回收
            fillColor = '#00bbfb'
            pointNum2++
          } else 
          if(item.bus_type === 0){ // 暂存点
            fillColor = '#fb315c'
            pointNum0++
          }
          circles.push({
            center: [item.longitude, item.latitudes],
            radius: 5,
            strokeColor: '#003446',
            strokeWeight: 1,
            fillColor: fillColor,
            fillOpacity: 1,
            events: {
              click: () => {
                console.log('click',item.id + ' ' + item.recycle_bin_name)
                this.$emit('showPoint', item.id)
              }
            }
          })
        })
        this.circles = circles
        this.$emit('loadedPoint', {pointNum0,pointNum1,pointNum2})
      })
    }
  },
  mounted(){
    this.mapStyle = 'amap://styles/blue'
    this.getAllLocations()
    setInterval(this.getAllLocations, this.$IntervalSeconds)
  }
}
</script>